<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <style type="text/css">
        .uploader-list {
            margin-left: -15px;
        }

        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }

        .uploader-list .handle span {
            margin-right: 5px;
        }

        .uploader-list .handle span:hover {
            cursor: pointer;
        }

        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <input type="hidden" name="class_id" value="{$class_id}">
            <input type="hidden" name="student_id" value="{$student_id}">
            <input type="hidden" name="admin_id" value="{$admin_id}">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    发布时间
                </label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-form-danger" name="add_time" id="add_time"
                           value="{$model['add_time']??""}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    说明
                </label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-form-danger" name="action_info" type="text"
                           value="{$model['action_info']??""}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    观察情况
                </label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-form-danger" name="behavior_info" type="text"
                           value="{$model['behavior_info']??""}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    观察图片
                </label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test2">多图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                            预览图：
                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'jquery', 'layedit', 'uploads', 'upload', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layedit = layui.layedit
        let upload = layui.upload
        let laydate = layui.laydate
        layedit.set({
            uploadImage: {
                url: "{$Request.root}/index/upload"
            }
        });
        //建立编辑器
        //建立编辑器
        laydate.render({
            elem: '#add_time'
            ,type: 'datetime'
        });

        upload.render({
            elem: '#test2'
            ,url: "{$Request.root}/index/upload"
            ,multiple: true
            ,before: function(obj){
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//关闭上传提示窗口
                $('#uploader-list').append(
                    '<div id="" class="file-iteme">' +
                    '<div class="handle"><span class="glyphicon glyphicon-trash">删除</span></div>' +
                    '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
                    '<input name="behavior_img[]" type="hidden" value="'+res.data.src +'">' +
                    '</div>'
                );
            }
        });

        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        $(document).on("click", ".file-iteme .handle", function(event){
            $(this).parent().remove();
        });


        form.on('submit(save)', function (data) {

            $.ajax({
                data: data.field,
                type: 'post',
                success: function (res) {
                    //判断有没有权限
                    if (res && res.code == 999) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 2000,
                        })
                        return false;
                    } else if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("dataTable");
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>